<template>
  <div class="admin-wrapper">
    <div class="menu-bar">
      <el-menu
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :default-active="$route.name"
        router
      >
        <el-menu-item :route="{ name: 'forumStatistics' }" index="forumStatistics">
          <i class="el-icon-menu"></i>
          <span slot="title">统计数据</span>
        </el-menu-item>
        <el-menu-item :route="{ name: 'forumBanAbout' }" index="forumBanAbout">
          <i class="el-icon-document"></i>
          <span slot="title">管理面板</span>
        </el-menu-item>
        <el-menu-item
        v-if="$route.meta.auth=='owner'"
          :route="{ name: 'forumAdministrators' }"
          index="forumAdministrators"
        >
          <i class="el-icon-setting"></i>
          <span slot="title">管理员调配</span>
        </el-menu-item>
        <el-menu-item
        v-if="$route.meta.auth=='owner'"
          :route="{ name: 'forumConfig' }"
          index="forumConfig"
        >
          <i class="el-icon-setting"></i>
          <span slot="title">信息修改</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="pane">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import ForumStatistics from "@/components/ForumAdmin/ForumStatistics.vue";
import AdminPane from "@/components/ForumAdmin/AdminPane.vue";
export default {
  props: ["forumId"],
  components: { ForumStatistics, AdminPane },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  watch:{
    'forumId':function() {
      window.location.reload()
    }
  }
};
</script>
 

<style scoped lang="less">
.admin-wrapper {
  padding-top: 1px;
  display: flex;
  height: 100%;
  .menu-bar {
    height: 100%;
    .el-menu {
      width: 300px;
      height: 100%;
    }
  }
  .pane {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    padding: 20px;
  }
}
</style>